<template>
    <div id='basicInfo'>
        <el-form class='basicInfo-content-form' :model='user.userInfo'>
            <div class='form-main'>
                <image-upload @avatar='avatarHandler' :is-show-tip='false' v-model='user.avatar' class='avatar'
                              :limit='1' />
                <div class='cols'>
                    <div class='col'>
                        <el-form-item label='昵称'>
                            <el-input v-model='user.userInfo.nickName' placeholder='请输入昵称' />
                        </el-form-item>
                        <el-form-item label='性别'>
                            <el-select v-model='user.userInfo.sex' class='ff' placeholder='请选择'>
                                <el-option
                                    v-for='dict in sys_user_sex'
                                    :key='dict.value'
                                    :label='dict.label'
                                    :value='dict.value'
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='部门'>
                            <el-input disabled :model-value='user?.userInfo?.dept?.deptName as string' />
                        </el-form-item>
                    </div>
                    <div class='col' style='width: 350px;'>
                        <el-form-item label='登录时间'>
                            <el-input disabled :model-value='parseTime(user.userInfo.loginDate) as string' />
                        </el-form-item>
                        <el-form-item label='登录地址'>
                            <el-input disabled :model-value='user.userInfo.loginIp as string' />
                        </el-form-item>
                        <el-form-item label='手机号码'>
                            <el-input v-model='user.userInfo.phonenumber' placeholder='请输入手机号码' />
                        </el-form-item>
                    </div>
                </div>
                <!--                个性签名-->
                <div class='my-sign'>
                    <div class='label'>个性签名</div>
                    <el-form-item>
                        <el-input show-word-limit maxlength='50' v-model='user.userInfo.remark'
                                  placeholder='请输入个性签名' type='textarea' />
                    </el-form-item>
                </div>
                <div class='btns'>
                    <el-button type='primary' @click='submit'>保存修改</el-button>
                </div>
            </div>

        </el-form>
    </div>
</template>

<script setup lang='ts'>
import useUserStore from '@/store/modules/user';
import { getCurrentInstance } from 'vue';
import { parseTime } from '@/utils/sk';
import { updateUserProfile } from '@/api/system/user';

const { proxy } = getCurrentInstance();
const { sys_user_sex } = proxy.useDict('sys_user_sex');

const user = useUserStore();

/*头像上传成功*/
const avatarHandler = (avatarURL: string) => {
    user.avatar = import.meta.env.VITE_APP_BASE_API + avatarURL;
    // submit();
};
/*提交*/
const submit = () => {
    const _copyUserInfo = JSON.parse(JSON.stringify(user.userInfo));
    user.userInfo.avatar = (user.avatar).replace('/api', '');//头像
    updateUserProfile(user.userInfo).then(() => {
        proxy.$modal.msgSuccess('个人信息修改成功');
    }).catch(() => {
        user.setUserInfo(_copyUserInfo);
    });
};
</script>

<style scoped lang='scss'>
.avatar {
    width: 180px;
    height: 180px;
    border-radius: 6px;
    margin-right: 24px;

    :deep(.hide), :deep(.el-upload-list), :deep(.el-upload-list__item), img {
        width: 100%;
        height: 100%;
    }


}


.form-main {
    display: flex;
    flex-wrap: wrap;
    width: 89%;

    .btns {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }

    .cols {
        display: flex;
        flex: 1;
        height: 180px;
    }

    :deep(.el-form-item__label), .label {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.8);
    }

    .my-sign {
        margin-top: 24px;
        width: 1000px;
        height: 200px;

        .label {
            margin-bottom: 10px;
        }

        :deep(.el-textarea__inner) {
            background: #F2F6FC;
            box-shadow: none;
            min-height: 150px !important;
            resize: none;
        }
    }

    .col {
        width: 312px;
        margin-right: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }

        &:last-child {
            margin-right: 0;
        }

        :deep(.el-form-item) {
            margin-bottom: 0;
        }
    }
}
</style>
